<template>
  <div class="app-container">
    <el-card>
      <div class="view">
        <el-form ref="searchForm" :model="searchForm" inline size="small">
          <el-form-item label="分类名称">
            <el-input
              v-model="searchForm.name"
              @input="input"
              placeholder="请输入分类名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')"
              >重置</el-button
            >
            <el-button icon="el-icon-search" type="primary" @click="getList()"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <el-button
            size="small"
            type="primary"
            @click="addClick()"
            icon="el-icon-plus"
            >添加课程素材分类</el-button
          >
        </div>

        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            border
            row-key="id"
          >
            <el-table-column prop="id" label="编号" width="180" align="center">
            </el-table-column>
            <el-table-column
              prop="name"
              label="分类名称"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="materialCount"
              label="资料数量"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="sort" label="排序" sortable align="center">
            </el-table-column>
            <el-table-column prop="enableStatus" label="状态" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.enableStatus"
                  :active-value="0"
                  :inactive-value="1"
                  @change="changeStatus(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" align="center">
              <template slot-scope="scope">
                <!-- :disabled="scope.$index == 0" -->
                <el-button size="mini" type="text" @click="addStatus(scope.row)"
                  >新增</el-button
                >
                <el-button size="mini" type="text" @click="UpStatus(scope.row)"
                  >操作</el-button
                >
                <el-button size="mini" type="text" @click="Status(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <addForm
          @getList="getList"
          :runCateList="roundCateList"
          :articleCateList="cateList"
          ref="add"
        ></addForm>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  sourcematerial,
  Deletematerial,
  enableStatusmaterial,
} from "@/api/lesson";
import addForm from "./components/addform.vue";
export default {
  components: { addForm },
  data() {
    return {
      searchForm: {
        name: "",
      },

      cateList: [],
      roundCateList: [],
      listLoading: false,
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    resetForm() {
      this.searchForm.name = "";
      this.getList();
    },
    input(e) {
      this.getList();
    },
    addClick() {
      this.$refs.add.openDialog();
    },
    searchList() {
      this.searchForm.name = "";
      this.getList();
    },
    // 查询
    getList() {
      this.listLoading = true;
      sourcematerial(this.searchForm)
        .then((res) => {
          var array = [];
          this.tableData = res.data;
          this.addParentName(this.tableData);
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    addParentName(data) {
      data.forEach((item) => {
        if (item.children && item.children.length > 0) {
          item.children.forEach((child) => {
            child.parentName = item.name;
          });
          this.addParentName(item.children);
        }
      });
    },
    UpStatus(item) {
      this.$refs.add.openDialog(item, 2);
    },
    addStatus(item) {
      this.$refs.add.openDialog(item, 1);
    },
    Status(id) {
      this.listLoading = true;
      Deletematerial(id)
        .then((res) => {
          this.getList();
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    changeStatus(v) {
      enableStatusmaterial({
        id: v.id,
        enableStatus: v.enableStatus,
      }).then((res) => {
        this.$message.success("操作成功");
        this.getList();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.view {
  padding: 20px;
  .search {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 400px;
  }
  .Add-Refresh {
    margin-top: 40px;
  }
  .table {
    margin-top: 20px;
  }
}
</style>
